<template>
	<div class="hello">
		<el-container>
			<el-header>
				<h2>萤火光影社</h2>
			</el-header>
			<el-main>
				<h1>网盘当前使用:{{now_user}}</h1>
				<p>
					<router-link to="/use">
						<el-button type="primary" size="large">使用网盘</el-button>
					</router-link>
				</p>
				<p>
					<router-link to="/news">
						<el-button size="large">查看公告</el-button>
					</router-link>
				</p>
				<p>
					<router-link to="/forgot">
						<el-button size="info">修改密码</el-button>
					</router-link>
				</p>
				<p>
					<router-link to="/manager">
						<el-button type="danger" size="large">管理</el-button>
					</router-link>
				</p>
			</el-main>
			<el-footer>
				<a>copyright@lilou(饮水机管理员)</a>
				<a href="http://www.beian.miit.gov.cn">ICP证：浙ICP备17009869号-2</a>
			</el-footer>
		</el-container>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				now_user: '无'
			}
		},
		created() {
			this.get_now_user();
		},
		methods: {
			get_now_user() {
				axios.get('get_now_user')
					.then((res) => {
						if (res.data.data !== 'null') {
							this.now_user = res.data.data
						} else{
							this.now_user = '无'
						}
					})
			}
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1, h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	a:link {
		font-size: 12px;
		color: #000000;
		text-decoration: none;
	}

	a:visited {
		font-size: 12px;
		color: #000000;
		text-decoration: none;
	}

	a:hover {
		font-size: 12px;
		color: #999999;
		text-decoration: underline;
	}
</style>
